<template>
  <!-- 2设备抗定位 -->

  <div class="dialogbg" style="z-index: 10000">
    <div class="_bg2">
      <div class="title">
        设备信息
      </div>

      <div class="body2">
        <div class="unit-info">
          <span>所属单位：</span>
          <span class="right-align">单位2</span>
        </div>
        <div class="unit-info">
          <span>风险距离：</span>
          <span class="right-align orange-text">12.1KM</span>
        </div>
        <div class="unit-info">
          <span>设备真实地理位置：</span>
          <span class="right-align">(34.1456，135.4566)</span>
        </div>
        <div class="unit-info">
          <span class="right-align">河南省郑州市管城回族区英协路5号</span>
        </div>
      </div>

      <div class="bt">
        <el-button class="bt1" @click="dialogVisible2 = true">
          抗定位
        </el-button>
        <el-button class="bt1">
          详情
        </el-button>
      </div>


      <img :src="require('@/assets/xd/location3.png')" alt="" style="
                  position: relative;
                  top: -50%;
                  left: 40%;
                  z-index: 200;
                ">
      <!-- 弹窗 -->
      <!-- 抗定位按钮 新建抗定位任务弹窗 -->
    </div>
    <div class="_bg1" />

    <el-dialog class="maindialog" title="新建抗定位任务" :visible.sync="dialogVisible2" width="50%" z-index="1000">
      <div class="dialogimage">
        <div class="">
          <el-descriptions title="设备信息">
            <el-descriptions-item label="IP地址">
              202.196.0.30
            </el-descriptions-item>
            <el-descriptions-item label="归属单位">
              单位2
            </el-descriptions-item>
            <el-descriptions-item label="设备真实地理位置">
              河南省郑州市管城回族区英协路5号
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 下面部分 -->
        <div class="">
          <el-descriptions title="抗定位配置">
            <el-descriptions-item label="干扰方式">
              <el-radio-group v-model="radioVal" @input="handleRadioChange">
                <el-radio label="1">
                  基于虚假地标的抗定位
                </el-radio>
                <el-radio label="2">
                  基于时延混淆的抗定位
                </el-radio>
              </el-radio-group>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 虚假web地标信息列表 -->
        <div v-if="radioVal == 1">
          <span>虚假web地标信息列表</span>
          <el-table ref="singleTable" :data="tableData2" style="width: 100%" @row-click="handleRowClick">
            <el-table-column label="" width="55">
              <template slot-scope="scope">
                <el-radio v-model="selectedRow" :label="scope.$index + 1"
                  @change="handleSelectionChange(scope.$index + 1, scope.row)" />
              </template>
            </el-table-column>
            <el-table-column prop="ip" label="IP地址" />
            <el-table-column prop="nominalposition" label="虚假地标标称位置" />
            <!-- <el-table-column
            prop="layoutposition"
            label="虚假地标布设位置"
          /> -->
            <el-table-column prop="protectedAddress" label="受保护目标" />
          </el-table>
        </div>
        <!-- 另一个列表 基于防火墙的抗定位 -->
        <div v-if="radioVal == 2">
          <span>设置回复延迟：</span>
          <!-- <el-input
          v-model="input"
          placeholder="设置回复延迟："
          style="width: 150px"
        /> -->
          <el-input ref="inputTime" v-model="input1" placeholder="XX毫秒" style="width: 150px" />
        </div>

        <!-- //底部按钮 -->
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible2 = false">
            取消
          </el-button>
          <el-button type="primary" @click="showDetails">
            提交
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog class="maindialog2" :visible.sync="dialogDetails" width="30%" z-index="1000">
      <template #title>
        <div style="font-weight:bold;font-size:20px;color: #fff;text-align: center;">
          新建设备抗定位任务
        </div>
      </template>
      <!-- :before-close="handleClose" -->
      <span class="dialogDetailstext">新建设备抗定位任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      input1: "",
      radioVal: "1",
      selectedRow: null,
      dialogVisible2: false,
      dialogDetails: false,
      tableData2: [
        {
          ip: "202.196.0.12",
          nominalposition: "河南农业大学",
          layoutposition: "河南大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.19",
          nominalposition: "华北水利水电大学",

          layoutposition: "浙江交通大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.78",
          nominalposition: "河南牧业经济学院",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.11",

          nominalposition: "河南职业技术学院",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.65",

          nominalposition: "河南警察学院",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.56",

          nominalposition: "河南财经政法大学",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
      ],
    };
  },
  methods: {
    handleRadioChange() {
    },
    showDetails() {
      this.dialogVisible2 = false;
      this.dialogDetails = true;
    },
    show() {
      this.$emit("showDialog");
    },
    handleRowClick() {
    },
    handleSelectionChange(index) {
      this.selectedRow = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogbg {
  position: absolute;
  top: 50%;
  left: 45%;
  width: 320px;
  height: 220px;
  z-index: 100;
  ._bg1 {
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/xd/dialogbg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #90CEE9;
    padding: 10px;
    font-size: 16px;
  }

  ._bg2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    color: #90CEE9;
    padding: 10px;
    font-size: 19px;
  }

  .title {
    text-align: center;
    color: #ffffff;
    font-size: 20px;
  }
  .bt {
    position: absolute;
    bottom: 10px;
    left: 80px;
  }

  .el-button {
    font-size: 13px;
      width: 80px;
        height: 30px;    background: linear-gradient(270deg, #2DB2FD 0%, #0E5FFF 100%);
    border-radius: 2px 2px 2px 2px;
    border: none;
    color: #fff;
    text-align: center;
  }
}

.body2 {
  position: absolute;
  top: 50px;
  font-size: 16px;
}

.dialog-footer {
  text-align: center;
}

.dialogDetailstext {
  font-size: 18px;
  font-weight: bolder;
  color: #fff;
}

</style>
